import React, { useEffect } from 'react';
import { Input, Icon, Button, Form, Modal } from 'antd';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import { jsEncodePwd } from '@/utils/utils';
import logo from './img/user-head.png';
import styles from './less/locked.less';

function Locked({
  dispatch,
  user: {
    userInfo: { userName, userPhoto },
  },
  submitting,
  form: { getFieldDecorator, validateFields },
}) {
  // 禁用body滚动条
  useEffect(() => {
    document.querySelector('body').classList.add('noScroll');
    return () => {
      document.querySelector('body').classList.remove('noScroll');
    };
  }, []);

  function handleLogout() {
    // 手动更新ok按钮loading状态
    // onOk返回promise对象时，只有在resolve()之后才会关闭
    const modal = Modal.confirm({
      centered: true,
      zIndex: 10001, // root container是10000，所以必须大于
      title: formatMessage({ id: 'logoutConfirm' }),
      onOk() {
        modal.update({ okButtonProps: { loading: true } });
        return new Promise(resolve => {
          // dispatch({
          //   type: 'login/logout',
          // }).then(() => {
          //   modal.update({ okButtonProps: { loading: true } });
          //   resolve();
          // });
        }).catch(() => console.log('Oops errors!'));
      },
    });
  }

  function handleSubmit(e) {
    e.preventDefault();
    validateFields((err, values) => {
      if (!err) {
        const { password } = values;
        dispatch({
          type: 'login/unlock',
          payload: jsEncodePwd(password),
        });
      }
    });
  }

  return (
    <div className={styles.container}>
      <svg className={styles.bg} width="100%" viewBox="0 0 1200 800">
        <circle fill="rgba(161,174,245,.15)" r="130" cx="350" cy="250" className={styles.circle1} />
        <circle fill="rgba(120,172,254,.1)" r="80" cx="500" cy="320" className={styles.circle2} />
      </svg>
      <div className={styles.logout} onClick={handleLogout}>
        <Icon type="poweroff" />
      </div>
      <div className={styles.main}>
        <div className={styles.mediaBox}>
          <div className={styles.mediaLeft}>
            <img
              src={
                userPhoto ? `portal/FileStoreController/dfsReadImage.do?docLink=${userPhoto}` : logo
              }
              alt="logo"
              width={64}
              height={64}
            />
          </div>
          <div className={styles.mediaBody}>
            <p>
              <span className="bold">{userName}</span>
            </p>
            <Form onSubmit={handleSubmit} className="login-box">
              <Form.Item>
                {getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                      message: '请输入密码',
                    },
                  ],
                })(
                  <Input
                    type="password"
                    placeholder="输入密码解锁"
                    allowClear
                    className={styles.input}
                    addonAfter={
                      <Button
                        type="primary"
                        icon="arrow-right"
                        loading={submitting}
                        onClick={handleSubmit}
                      />
                    }
                  />
                )}
              </Form.Item>
            </Form>
            <div className={styles.mediaBodyTextHack} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default connect(({ login, loading }) => ({
  user: login.user,
  submitting: loading.effects['login/unlock'],
}))(Form.create()(Locked));
